<template>
    <div class="common-layout">
        <el-container style="margin-left: 200px; border: groove; border-width: 2px;">
            <div>
                <H2 style="margin-left: 100px;">权限管理</H2>
            </div>
            <el-header>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="权限名称:">
                        <el-input v-model="percan.PermissionName" clearable style="width: 190px;" />
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" @click="perlist">查询</el-button>
                        <el-button type="success" @click="nextadd">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table :data="perdata" border style="width: 100%;">
                    <el-table-column type="index" label="权限编号" width="100" />
                    <el-table-column prop="permissionName" label="权限名称" />
                    <el-table-column prop="permissionURL" label="权限URL" />
                    <el-table-column prop="index" label="权限序号" />
                    <el-table-column label="编辑权限">
                        <template v-slot="scope">
                            <el-button type="warning" @click="upd(scope.row.permissionId)">编辑</el-button>
                            <el-button type="danger" @click="open(scope.row.permissionId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { Read, Write } from '@/Http/axios'
import { ElMessage, ElMessageBox } from "element-plus";
import { useCounterStore } from '@/stores/counter';
import router from '@/router'
const store = useCounterStore();


const perdata = ref([
    {
        "permissionId": 0,
        "permissionName": "",
        "permissionURL": "",
        "index": 0
    },
])

const percan = reactive({
    PermissionName: "",
})
/**
* 获取权限列表数据
*/
const perlist = () => {
    Read.get('/Management/PermissionShow', {
        params: {
            PermissionName: percan.PermissionName,
        }
    }).then(res => {
        perdata.value = res.data.data
    })
}

//钩子函数
onMounted(() => {
    perlist();
})

//添加跳转页面
const nextadd = () => {
    router.push('/PermissionAdd')
}

const upd = (permissionId: any) => {

    router.push({
        name: 'PermissionUpd',
        query: { permissionId: permissionId }
    })
}

//删除
const open = (permissionId: any) => {
    ElMessageBox.confirm(
        '您确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            Write.delete("/Management/DeleteRepmission", {
                data: {
                    permissionId: permissionId,
                },
            }).then(res => {
                if (res.data.code == 500) {
                    ElMessage.success("删除成功！")
                    perlist();
                }
                else {
                    ElMessage.error("删除失败！")
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}

</script>